<script setup>
import { ref, reactive, watch } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router';
import { LOGIN } from '../store'

const store = useStore()
const router = useRouter()

watch(store.state, () => {
    router.replace('/')
}, true)

const form = ref(null)

const ruleForm = reactive({
    username: '', 
    password: ''
})

const validateUsername = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入用户名'))
    } else {
        if (ruleForm.username !== '') {
            if (!form.value) return
            form.value.validateField('username', () => null)
        }
        callback()
    }
}

const validatePassword = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        if (ruleForm.password !== '') {
            if (!form.value) return
            form.value.validateField('password', () => null)
        }
        callback()
    }
}

const rules = reactive({
    username: [{ validator: validateUsername, trigger: 'blur' }],
    password: [{ validator: validatePassword, trigger: 'blur' }]
})

const submit = () => {
    // 登录请求
    store.dispatch(LOGIN, ruleForm)
}

</script>
<template>
    <div class="wrapper">
        <header>
            <img src="../assets/img/logo_white.png">
        </header>
        <main>
            <div>
                <h1>企业“销售+管理”全流程</h1>
                <h2>客户关系管理的前沿创新</h2>
                <p>悟空CRM已涉及教育业、制造业、服务业、金融业、政府机构等10多种行业解决方案，全面帮助企业进行信息化建设</p>
                <img src="../assets/img/main_pic.png">
            </div>
            <div>
                <el-form status-icon ref="form" >
                    <el-form-item prop="username">
                        <el-input type="text" v-model="ruleForm.username" autocomplete="off" placeholder="请输入用户名" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submit">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </main>
        <!-- :rules="rules" :model="ruleForm" -->
        
    </div>
</template>

<style scoped lang="scss">
.wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: url(../assets/img/bg.png) no-repeat center;
}
header{
    padding: 23px 2.8% 0;
    img{
        height: 50px;
    }
}
main{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
        width: 100%;
    }
    >div{
        width: 480px;
        box-sizing: border-box;
        &:last-child{
            padding: 0 40px;
            background-color: #fff;
            border-radius: 6px;
            margin-left: 80px;
        }
    }
}
</style>